import { useEffect } from "react";
import type { FC, ReactNode } from "react";
import useUserInfo from "@/store/user-info";
import { Skeleton } from "antd";

interface propsType {
  children: ReactNode;
  NoSign: ReactNode;
  NoSignCallback?: Function;
  Loading?: ReactNode;
  Error?: ReactNode;
  errorCallback?: Function;
}

/**
 * 用来判断用户是否登录，以显示对应的组件
 * @params children {ReactNode} 用户登录了显示的组件
 * @params NoSign {ReactNode} 用户未登录显示的组件
 * @params noSignCallback {Function|undefined} 如果未登录执行什么函数
 * @params Loading {ReactNode|undefined} 数据请求中的加载的组件
 * @params Error {ReactNode|undefined} 数据请求错误加载的组件
 * @params errorCallback {Function|undefined} 如果请求错误执行什么函数
 */
const Sign: FC<propsType> = props => {
  let { data, isValidating, error } = useUserInfo();
  useEffect(() => {
    if (data == null && props.NoSignCallback) props.NoSignCallback();
    if (error && props.errorCallback) props.errorCallback();
  }, [data, error]);
  return (
    <>
      {data
        ? props.children
        : isValidating
        ? props.Loading || <Skeleton active />
        : props.Error || <div className="flex items-center justify-center">请求错误...</div>}
    </>
  );
};

export default Sign;
